import React from 'react';
import { Image } from 'antd';
import { count } from '@/utils/count';
import style from './PlaylistItem.module.css';

export default function PlaylistItem(props) {
  const { id, name, playCount, picUrl, width, height, routerToPlayListDetail } = props
  return (
    <div className={style.playlistItem}>
      {/* 图片 */}
      <section className={style.imgContainer}>
        <Image className={style.antImg} src={picUrl} width={width} height={height} preview={false} />
        {/* 播放次数 */}
        <div className={style.countContainer}>
          <span className='iconfont icon-18erji-1'></span>
          <span className={style.count}>{count(playCount)}</span>
        </div>
        {/* 播放图标 */}
        <span className={`iconfont icon-bofang ${style.icon}`} onClick={() => routerToPlayListDetail(id)}></span>
      </section>
      {/* 图片的标题 */}
      <span className={style.name} onClick={() => routerToPlayListDetail(id)}>{name}</span>
    </div>
  )
}
